<header>
    <nav class="nav">
        <ul class="nav-list">
            <li>
                <input (input)="onNameChange()" [(ngModel)]="name" spellcheck="false" autocomplete="off" type="text" class="navbar-name" id="navbar-name" />
            </li>
            <li>
                <button mat-icon-button [matMenuTriggerFor]="fileMenu" aria-label="File menu">
                    File
                </button>
                <mat-menu #fileMenu="matMenu">
                    <button mat-menu-item (click)="showConfirmDialog('Do you really want to create a new file?', newFileDialog )">
                        <span>New file</span>
                    </button>
                    <button mat-menu-item (click)="openSaveFile()">
                        <span>Save file</span>
                    </button>
                    <label class="file-form" mat-menu-item class="custom-file-upload">
                        <input #file (input)="load(file)" type="file" accept=".json" style="position: absolute;width: 100%;height: 100%;opacity: 0;cursor: pointer;right: 0;z-index: 100;">
                        Load file
                    </label>
                    <button mat-menu-item (click)="showSaved.emit(name)">
                        <span>Show saved boards</span>
                    </button>
                    <hr class="line">
                    <button mat-menu-item (click)="save.emit(name)">
                        <span>Save</span>
                    </button>
                    <hr class="line">
                    <button mat-menu-item mat-icon-button [matMenuTriggerFor]="exportMenu" aria-label="Export menu">
                        Export
                    </button>
                    <mat-menu #exportMenu="matMenu">
                        <button mat-menu-item (click)="openExportPngDialog()">
                            <span>Export as PNG</span>
                        </button>
                        <button mat-menu-item (click)="openExportSvgDialog()">
                            <span>Export as SVG</span>
                        </button>
                    </mat-menu>
                    <button mat-menu-item mat-icon-button [matMenuTriggerFor]="embedMenu" aria-label="Embed menu">
                        Embed
                    </button>
                    <mat-menu #embedMenu="matMenu">
                        <button mat-menu-item (click)="openEmbedIFrame()">
                            <span>Embed IFrame</span>
                        </button>
                    </mat-menu>
                </mat-menu>
            </li>
            <li>
                <button mat-icon-button [matMenuTriggerFor]="editMenu" aria-label="Edit menu">
                    Edit
                </button>
                <mat-menu #editMenu="matMenu">
                    <button mat-menu-item (click)="copyComponent.emit()">
                        <span>Copy</span>
                    </button>
                    <button mat-menu-item (click)="pasteComponent.emit()">
                        <span>Paste</span>
                    </button>
                    <button mat-menu-item (click)="cutComponent.emit(); ">
                        <span>Cut</span>
                    </button>
                    <button mat-menu-item (click)="delComponent.emit()">
                        <span>Delete</span>
                    </button>
                    <button mat-menu-item (click)="undo.emit()">
                        <span>Undo</span>
                    </button>
                    <button mat-menu-item (click)="redo.emit()">
                        <span>Redo</span>
                    </button>
                    <hr class="line">
                    <button mat-menu-item (click)="showConfirmDialog('Do you really want to clear the board?', clearBoardDialog)">
                        <span>Clear board</span>
                    </button>
                </mat-menu>
            </li>
            <li>
                <button mat-icon-button [matMenuTriggerFor]="viewMenu" aria-label="View menu">
                    View
                </button>
                <mat-menu #viewMenu="matMenu">
                    <button mat-menu-item (click)="viewingService.setDarkMode(!viewingService.isDarkMode())">
                        <span *ngIf="viewingService.isDarkMode(); else lightMode">Light mode</span>
                        <ng-template #lightMode>
                            <span>Dark mode</span>
                        </ng-template>
                    </button>
                    <button mat-menu-item (click)="fullscreen.emit()">
                        <span>Go fullscreen</span>
                    </button>
                    <button mat-menu-item (click)="zoomIn.emit()">
                        <span>Zoom in</span>
                    </button>
                    <button mat-menu-item (click)="zoomOut.emit()">
                        <span>Zoom out</span>
                    </button>
                    <hr class="line">
                    <button mat-menu-item (click)="toggleHelpersDisabled()">
                        <span *ngIf="isHelpersDisabled; else helpersEnabled">Enable <i class="far fa-question-circle"></i> helpers</span>
                        <ng-template #helpersEnabled>
                            <span>Disable <i class="far fa-question-circle"></i> helpers</span>
                        </ng-template>
                    </button>
                    <button mat-menu-item (click)="toggleTitlesHidden()">
                        <span *ngIf="isTitlesHidden; else titlesVisible">Show titles</span>
                        <ng-template #titlesVisible>
                            <span>Hide titles</span>
                        </ng-template>
                    </button>
                    <button mat-menu-item (click)="toggleTechnologiesHidden()">
                        <span *ngIf="isTechnologiesHidden; else technologiesVisible">Show technologies</span>
                        <ng-template #technologiesVisible>
                            <span>Hide technologies</span>
                        </ng-template>
                    </button>
                    <hr class="line">
                    <button mat-menu-item (click)="resetView.emit()">
                        <span>Reset view</span>
                    </button>
                </mat-menu>
            </li>
            <li>
                <button mat-icon-button [matMenuTriggerFor]="helpMenu" aria-label="Help menu">
                    Help
                </button>
                <mat-menu #helpMenu="matMenu">
                    <button mat-menu-item (click)="onboardTutorial1.emit()">
                        <span>Quick introduction tutorial</span>
                    </button>
                    <a mat-menu-item href="https://github.com/honzaap/Systemizer" target="_blank" >
                        <span>GitHub</span>
                    </a>
                    <button mat-menu-item (click)="openKeyboardShortcuts()">
                        <span>Keyboard shortcuts</span>
                    </button>
                    <a mat-menu-item href="https://github.com/honzaap/Systemizer/issues" target="_blank" >
                        <span>Report a bug</span>
                    </a>
                </mat-menu>
            </li>
        </ul>
        <div class="nav-bonus">
            <mat-checkbox [disabled]="simulationService.isFlowSimulationOn" class="example-margin" (change)="togglePerformanceModeEnabled()" [(ngModel)]="isPerformanceModeEnabled">Performance mode</mat-checkbox>
            <mat-checkbox class="example-margin" (change)="toggleHideResponses()" [(ngModel)]="isResponsesHidden">Hide responses</mat-checkbox>
            <button [matTooltip]="'Start a flow simulation (still in a beta)'" (click)="startFlowSimulation()" *ngIf="!simulationService.isFlowSimulationOn; else stopSimulationTemp">
                Start simulation
                <span class="badge">Beta</span>
            </button>
            <ng-template #stopSimulationTemp>
                <button (click)="stopFlowSimulation()">
                    Stop simulation
                </button>
            </ng-template>
            <button (click)="fullscreen.emit()" *ngIf="isMobile">
                Go fullscreen
            </button>        
        </div>
    </nav>
    <nav class="nav-second">
        <ul class="nav-list">
            <li>
                <mat-form-field appearance="fill" class="nav-select">
                    <mat-select (selectionChange)="handleScaleChange()" [formControl]="scaleControl">
                      <mat-option *ngFor="let val of scaleSelectList" [value]="val">{{val*100}}%</mat-option>
                    </mat-select>
                </mat-form-field>
            </li>
            <li class="v-line">
                <span (click)="zoomIn.emit()" class="icon"><i class="fas fa-search-plus"></i></span>
            </li>
            <li>
                <span (click)="zoomOut.emit()" class="icon"><i class="fas fa-search-minus"></i></span>
            </li>
            <li class="v-line">
                <span (click)="undo.emit()" class="icon"><i class="fas fa-undo-alt"></i></span>
            </li>
            <li>
                <span (click)="redo.emit()" class="icon"><i class="fas fa-redo"></i></span>
            </li>
            <li class="v-line">
                <span (click)="copyComponent.emit()" class="icon"><i class="far fa-copy"></i></span>
            </li>
            <li>
                <span (click)="pasteComponent.emit()" class="icon"><i class="fas fa-paste"></i></span>
            </li>
            <li class="v-line">
                <span (click)="delComponent.emit()" class="icon"><i class="fas fa-trash"></i></span>
            </li>
        </ul>
    </nav>
</header>
<div class="confirm-dialog-container" (click.self)="closeDialog()" [style.display]="confirmDialogOpen ? 'flex' : 'none'">
    <div class="confirm-dialog">
        <p class="title">{{confirmDialogText}}</p>
        <div class="buttons-bottom">
            <button class="btn-cancel" (click)="closeDialog()">No</button>
            <button class="btn-confirm" (click)="confirmDialog()">Yes</button>
        </div>
    </div>
</div>
<div class="confirm-dialog-container" (click.self)="closeKeyboardShortcuts()" [style.display]="isKeyboardShortcutsOpen ? 'flex' : 'none'">
    <div class="keyboard-shortcuts-window">
        <span class="keyboard-shortcuts-title">Keyboard shortcuts</span>
        <ul class="shortcuts-list">
            <li><p class="highlight">CTRL C</p> <p>Copy component</p></li>
            <li><p class="highlight">CTRL V</p> <p>Paste component</p></li>
            <li><p class="highlight">DEL</p>    <p>Delete component</p></li>
            <li><p class="highlight">CTRL +</p> <p>Zoom in on board</p></li>
            <li><p class="highlight">CTRL -</p> <p>Zoom out of board</p></li>
            <li><p class="highlight">CTRL Z</p> <p>Undo change</p></li>
            <li><p class="highlight">CTRL Y</p> <p>Redo change</p></li>
        </ul> 
        <button class="close" (click)="closeKeyboardShortcuts()"><i class="fas fa-times"></i></button>
    </div>
</div>
<div class="confirm-dialog-container" (click.self)="closeExportPngDialog()" [style.display]="isExportPngDialogOpen ? 'flex' : 'none'">
    <div class="confirm-dialog export">
        <p class="title">Export as PNG</p>
        <label>
            <span>Transparent background: </span>
            <input type="checkbox" [(ngModel)]="exportPngOptions.transparentBackground">
        </label>
        <label>
            <span>Capture only used area: </span>
            <input type="checkbox" [(ngModel)]="exportPngOptions.captureUsed">
        </label>
        <label>
            <span>Show component titles: </span>
            <input type="checkbox" [(ngModel)]="exportPngOptions.showTitles">
        </label>
        <label>
            <span>Show technologies: </span>
            <input type="checkbox" [(ngModel)]="exportPngOptions.showTechnologies">
        </label>
        <label>
            <span>Light mode: </span>
            <input type="checkbox" [(ngModel)]="exportPngOptions.lightMode">
        </label>
        <label>
            <span>Light color titles: </span>
            <input [disabled]="!exportPngOptions.transparentBackground || !exportPngOptions.showTitles" type="checkbox" [(ngModel)]="exportPngOptions.lightTitles">
        </label>
        <div class="buttons-bottom">
            <button class="btn-cancel" (click)="closeExportPngDialog()">Cancel</button>
            <button class="btn-preview" (click)="openPreview()">Preview</button>
            <button class="btn-confirm" (click)="exportAsPng()">Download</button>
        </div>
    </div>
</div>
<div class="confirm-dialog-container" (click.self)="closeExportSvgDialog()" [style.display]="isExportSvgDialogOpen ? 'flex' : 'none'">
    <div class="confirm-dialog export">
        <p class="title">Export as SVG</p>
        <label>
            <span>Show component titles: </span>
            <input type="checkbox" [(ngModel)]="exportSvgOptions.showTitles">
        </label>
        <label>
            <span>Show technologies: </span>
            <input type="checkbox" [(ngModel)]="exportSvgOptions.showTechnologies">
        </label>
        <label>
            <span>Light color titles: </span>
            <input [disabled]="!exportSvgOptions.showTitles" type="checkbox" [(ngModel)]="exportSvgOptions.lightTitles">
        </label>
        <div class="buttons-bottom">
            <button class="btn-cancel" (click)="closeExportSvgDialog()">Cancel</button>
            <button class="btn-preview" (click)="openPreview(false)">Preview</button>
            <button class="btn-confirm" (click)="exportAsSvg()">Download</button>
        </div>
    </div>
</div>
<div class="preview-container" (click)="closePreview()" [style.display]="isPreviewOpen ? 'flex' : 'none'">
    <div #preview class="preview">
        <!-- Content added dynamically -->
    </div>
</div>
<div class="backdrop-centralized saving" *ngIf="isSavingOpen" (click.self)="isSavingOpen = false">
    <div class="saving-inner confirm-dialog">
        <div class="name">
            <label>File name</label>
            <input spellcheck="false" required [(ngModel)]="saveFileName" placeholder="File name">
        </div>
        <button class="close" (click)="isSavingOpen = false">×</button>
        <div class="buttons-bottom">
            <button class="btn-cancel" (click)="isSavingOpen = false">Close</button>
            <button class="btn-confirm" (click)="saveFile.emit(saveFileName)">Download</button>
        </div>
    </div>
</div>
<div class="backdrop-centralized embed" *ngIf="isEmbedIFrameOpen" (click.self)="closeEmbedIFrame()">
    <div class="confirm-dialog embed-inner">
        <h5>Embed as IFrame</h5>
        <p>An IFrame HTML tag will be generated. Copy & paste it into your HTML template to display your system in read-only format.</p>
        <label>
            <span>Show component titles by default: </span>
            <input (change)="changeEmbedIFrameOptions()" type="checkbox" [(ngModel)]="embedIFrameOptions.showTitles">
        </label>
        <label>
            <span>Dark mode: </span>
            <input (change)="changeEmbedIFrameOptions()" type="checkbox" [(ngModel)]="embedIFrameOptions.darkMode">
        </label>
        <textarea *ngIf="!showEmbedError; else iframeEmbedError" id="embedIframeText" readonly [textContent]="embedIFrameTemplate"></textarea>
        <ng-template #iframeEmbedError>
            <p class="error">You can only embed a system with 2 or more components!</p>
        </ng-template>
        <div class="buttons-bottom">
            <button class="btn-preview" (click)="previewEmbedIFrame()">Preview</button>
            <button class="btn-preview" (click)="closeEmbedIFrame()">Close</button>
            <button [disabled]="showEmbedError" class="btn-confirm" (click)="copyEmbedIFrame()">Copy</button>
        </div>
    </div>
</div>